html.sidebar-opened {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    position: relative;
    min-height: 100vh;
    padding: 0;
    margin: 0;


    .bd-title.main {
        padding: 0 !important;
    }
}

.sidebar {
    left: - $sidebar-width;
    transition-duration: $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed;
    transition-property: left, right, padding-left, padding-right, margin-left, margin-right;

}

.main {
    padding-bottom: $footer-height;
    transition-duration: $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed;
    transition-property: padding-left, padding-right, margin-left, margin-right;
}

.aside-menu {
    transition-duration: $layout-transition-speed, $layout-transition-speed;
    transition-property: left, right;
}

.footer {
    transition-duration: $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed;
    transition-property: padding-left, padding-right, margin-left, margin-right, left, right;
}

body.std {
    position: relative;

    header.navbar {
        z-index: $zindex-navbar-fixed;
    }

    .sidebar {
        padding-top: $navbar-height;
    }

    .main {
        padding-left: $sidebar-width;
    }
}

body.navbar-fixed {

    header.navbar {
        @extend .navbar-fixed-top;
    }

    .main {
        padding-top: $navbar-height;
    }

    &.top-nav {
        &.fixed-nav {

            nav.top-nav {
                position: fixed;
            }

            .main {
                padding-top: $navbar-height + $top-nav-height;
            }
        }
    }
}

body:not(.top-nav) {
    header.navbar {
        z-index: $zindex-navbar-fixed;
    }

    .sidebar {
        display: inline;
        padding-top: $navbar-height !important;
    }

    &.sidebar-nav.compact-nav {

        .main {
            padding-left: $sidebar-compact-width;
        }

        .footer {
            left: $sidebar-compact-width;
        }
    }

    &.fixed-nav {

        .sidebar {
            position: fixed;

            .sidebar-nav {
                height: calc(100vh - #{$navbar-height});
            }
        }

        .sidebar-footer {
            position: fixed;
            bottom: 0;
            left: 0;
        }
    }

    &.sidebar-off-canvas {

        header.navbar {
            z-index: $zindex-navbar-fixed + 2;
        }

        .sidebar {
            left: -$sidebar-width;
            z-index: $zindex-navbar-fixed + 1;
            padding-top: 0;

            .sidebar-close {
                display: inline;
            }

            .sidebar-nav {
                height: 100vh;
            }
        }

        .main {
            padding-left: 0;
        }

        .footer {
            left: 0;
        }
    }

    &.sidebar-opened {

        .sidebar {
            left: 0;
        }

        &.sidebar-off-canvas-push {

            .main {
                margin-right: -$sidebar-width;
                margin-left: $sidebar-width;
            }

            .footer {
                margin-right: -$sidebar-width;
                margin-left: $sidebar-width;
            }
        }

        &.sidebar-off-canvas-with-shadow {
            position: relative;
            max-width: 100% !important;
            overflow-x: hidden !important;


            &::after {
                position: absolute;
                top: 0;
                left: 0;
                z-index: $zindex-navbar-fixed;
                width: 100%;
                height: 100%;
                content: '';
                background: rgba(0,0,0,.7);
            }
        }
    }
}

body.sidebar-nav {
    .sidebar {
        left: 0;
    }
    .main {
        padding-left: $sidebar-width;
    }

    .footer {
        left: $sidebar-width;
    }
}

body.top-nav {

    .layout-toggler {
        display: none !important;
    }

    .main {
        padding-top: $navbar-height + $top-nav-height;
    }
}

body.aside-menu-open {
    .main {
        padding-right: $aside-menu-width;
    }

    .aside-menu {
        right: 0;
    }

    .footer {
        right: $aside-menu-width;
    }

    &.aside-menu-off-canvas {
        .main {
            right: 0;
            padding-right: 0;
        }
    }
}

body.footer-fixed {
    .footer {
        position: fixed;
        bottom: 0;
    }
}
